<template>
  <div class="actions">
    <div class="action" @click="plus">
      <el-icon :size="20"><Plus /></el-icon>
    </div>
    <div class="action" @click="minus">
      <el-icon :size="20"><Minus /></el-icon>
    </div>
    <div class="action" @click="preRecharge">{{ $t('home.order.recharge') }}</div>
    <div class="action">打折</div>
  </div>

  <el-dialog
    v-model="dialogRechargeVisible"
    :close-on-click-modal="false"
    :title="$t('home.order.rechargeTitle')"
    width="500"
    @opened="rechargeOpened"
    :z-index="100"
  >
    <div class="font-size-16px">
      <div class="info">
        <div>{{ $t('home.order.rechargeMoney') }} {{ recharge }}</div>
        <!-- <div>{{ $t('home.order.rechargePoints') }} 0</div> -->
      </div>
      <div class="flex m-t14px">
        <div class="ni">
          <div @click="nir(100000)">100000</div>
          <div @click="nir(200000)">200000</div>
          <div @click="nir(300000)">300000</div>
          <div @click="ni('1')">1</div>
          <div @click="ni('2')">2</div>
          <div @click="ni('3')">3</div>
          <div @click="ni('4')">4</div>
          <div @click="ni('5')">5</div>
          <div @click="ni('6')">6</div>
          <div @click="ni('7')">7</div>
          <div @click="ni('8')">8</div>
          <div @click="ni('9')">9</div>
          <div @click="ni('00')">00</div>
          <div @click="ni('0')">0</div>
          <div @click="ni('.')">.</div>
        </div>
        <div class="submit">
          <div @click="clean">{{ $t('common.clean') }}</div>
          <div class="sure" @click="chooseRecharge">{{ $t('common.sure') }}</div>
        </div>
      </div>
      <!-- <div class="flex m-t-20px">
        <div class="numbers">
          <div @click="setCharge(10000)">10000</div>
          <div @click="setCharge(20000)">20000</div>
          <div @click="setCharge(30000)">30000</div>
          <div @click="setCharge(40000)">40000</div>
          <div @click="setCharge(50000)">50000</div>
          <div @click="setCharge(60000)">60000</div>
        </div>
        <div class="submit">
          <div class="h-50px" @click="clean">{{ $t('common.clean') }}</div>
          <div class="h-100px m-t-10px" @click="submitRecharge">{{ $t('common.sure') }}</div>
        </div>
      </div> -->
    </div>
  </el-dialog>

  <el-dialog v-model="dialogChargePaywayVisible" :title="$t('common.tip')" width="500" :close-on-click-modal="false" :z-index="100">
    <div class="large">
      <el-radio-group v-model="chargePayWay">
        <el-radio :value="0" size="large" border>{{ $t('home.order.cash') }}</el-radio>
        <el-radio :value="50" size="large" border>Terminal</el-radio>
        <el-radio :value="51" size="large" border>Payme</el-radio>
        <el-radio :value="52" size="large" border>Uzum</el-radio>
        <el-radio :value="53" size="large" border>Click</el-radio>
        <el-radio :value="54" size="large" border>Alif</el-radio>
        <el-radio :value="55" size="large" border>Card</el-radio>
      </el-radio-group>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogChargePaywayVisible = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="submitRecharge">{{ $t('common.sure') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Plus, Minus } from '@element-plus/icons-vue'

const { t } = useI18n()

const dialogChargePaywayVisible = ref(false)
const chargePayWay = ref()

const ostore = useOrderStore()
const store = useAppStore()

const recharge = ref(0)

const dialogRechargeVisible = ref(false)

function plus() {
  ostore.plusOrder()
}

function minus() {
  ostore.minusOrder()
}

function preRecharge() {
  dialogRechargeVisible.value = true
}

function setCharge(num: number) {
  recharge.value = num
}

function clean() {
  recharge.value = 0
}

function ni(n: string) {
  let num = recharge.value + ''
  if (n !== '.') {
    num = recharge.value + n
  }

  recharge.value = parseInt(num)
}

function nir(n: number) {
  recharge.value = n
}

function rechargeOpened() {
  recharge.value = 0
}

function chooseRecharge() {
  dialogChargePaywayVisible.value = true
  chargePayWay.value = null
}

function submitRecharge() {
  if (recharge.value > 0 && chargePayWay.value != null) {
    store.setGlobalLoading(true, t('common.print'))
    apis.api
      .employeeOrderRecharge({
        price: recharge.value,
        type: 20,
        orderNum: '',
        payPrice: recharge.value,
        payed: true,
        payWay: chargePayWay.value,
        shopId: cache.getShop().id
      })
      .then(() => {
        dialogRechargeVisible.value = false
        dialogChargePaywayVisible.value = false
      })
      .finally(() => store.cleanGlobalLoading())
  }
}
</script>

<style lang="scss" scoped>
.actions {
  box-sizing: border-box;
  margin: 0 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  height: calc(100vh - 50px);

  .action {
    cursor: pointer;
    margin-top: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 50px;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    border: 2px solid #d4d9d9;
    font-weight: 500;
    font-size: 16px;
    color: #999999;
    &:active {
      background-color: #dcdcdc;
    }
  }
}
.info {
  line-height: 40px;
  border-radius: 8px;
  padding: 0 10px;
  background-color: #e4e4e4;
}
.numbers {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  div {
    width: 94px;
    height: 50px;
    background: #f6f6f6;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #d4d4d4;
    text-align: center;
    line-height: 50px;
    box-sizing: border-box;
    margin: 0 8px 8px 0;
    &:active {
      background-color: #3aa1a2;
      color: #fff;
    }
  }
}
.submit {
  div {
    width: 94px;
    background: #f6f6f6;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #d4d4d4;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #3aa1a2;
    &:active {
      background-color: #3aa1a2;
      color: #fff;
    }
  }
}
.ni {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 330px;
}
.ni,
.submit {
  div {
    cursor: pointer;
    border-radius: 4px;
    background-color: #f6f6f6;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0 10px 10px 0;
    &:active {
      background-color: #3aa1a2;
      color: #fff;
    }
  }
}
.submit {
  .sure {
    line-height: 100px;
    height: 100px !important;
  }
}
.large {
  :deep(.ep-radio) {
    margin-bottom: 20px;
  }
}
</style>
